<script setup>
import ForwardIcon from "../icons/IconForward.vue";
</script>
<template>
  <div class="infotable">
    <div class="change_user_name">
      修改用户名<ForwardIcon style="vertical-align: middle; margin-left: 8px" />
    </div>
    <div class="user_info">
      <img
        src="@/assets/UI/ProfilePicture.png"
        alt=""
        style="vertical-align: middle; margin-right: 8px"
      />
      mika
    </div>
  </div>
</template>

<style scoped>
.infotable {
  width: 100%;

  height: 72px;

  z-index: 1;

  /* Inside auto layout */
  background-color: rgb(255, 255, 255);

  flex: none;

  align-self: stretch;
  flex-grow: 0;
}
.change_user_name {
  position: absolute;

  width: 80%;
  height: 56px;

  text-align: right;

  color: #000000;
  font-weight: 400;
  font-size: 17px;
  line-height: 56px;

  right: 16px;
  top: 8px;

  z-index: 4;
}
.user_info {
  position: absolute;
  left: 18px;
  top: 14px;
  color: #000000;
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  z-index: 1;
}
</style>
